<template>
  <div class="root">
    <el-form
      :inline="true"
      style="--el-color-white: transparent; margin-top: 30px"
    >
      <el-form-item label="旧班号" class="item">
        <el-input v-model="oldclassno"></el-input>
      </el-form-item>
      <el-form-item label="新班号" class="item">
        <el-input v-model="newclassno"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button
          style="
            color: aqua;
            background-color: transparent;
            margin-top: 30px;
            font-weight: bold;
          "
          round
          @click="changeClassno"
          >修改<i class="el-icon-edit"></i
        ></el-button>
        
      </el-form-item>
    </el-form>
    <div class="wai">
      <el-table
        :data="tableData"
        style="
          --el-color-white: transparent;
          --el-text-color-regular: azure;
          --el-text-color-secondary: #909399;
          --el-background-color-base: transparent;
        "
      >
        <el-table-column prop="classno" label="班号" />
        <el-table-column prop="majno" label="专业号" />
        <el-table-column prop="joinyear" label="入校年份" />
        <el-table-column prop="cqty" label="人数" />
      </el-table>
    </div>

    <div class="block">
      <el-pagination
        style="
          --el-color-white: transparent;
          --el-text-color-primary: azure;
          --el-text-color-regular: azure;
          --el-color-primary: #f56c6c;
          margin-top: 50px;
        "
        layout="prev, pager, next, jumper"
        :total="(this.data.length * 10) / 5"
        @current-change="handlePage"
      >
      </el-pagination>
    </div>
  </div>
</template>

<script>
import axios from "axios";
import { ElNotification } from "element-plus";
export default {
  data() {
    return {
      oldclassno: "",
      newclassno: "",
      curpage: 1,
      tableData: [],
      data: [],
    };
  },
  created() {
    axios.get("http://localhost:8082/class").then((res) => {
      this.data = res.data;
      console.log(this.data);
      this.tableData = this.data.slice(0, 5);
    });
  },
  methods: {
    handlePage(cur) {
      this.tableData = this.data.slice((cur - 1) * 5, cur * 5);
    },
    changeClassno() {
      if (
        !this.oldclassno.match(/^[ ]*$/) &&
        !this.newclassno.match(/^[ ]*$/)
      ) {
        axios
          .get("http://localhost:8082/updateclassno", {
            params: {
              oldclassno: this.oldclassno,
              newclassno: this.newclassno,
            },
          })
          .then((res) => {
            console.log(res.data);
            if (res.data == "error") {
              ElNotification({
                title: "修改班号失败",
                message: "请检查填写是否符合要求",
                type: "error"
              });
            } else {
              ElNotification({
                title: "班级表变动",
                message: "成功修改班号",
                type: "success"
              });
              this.oldclassno = ""
              this.newclassno = ""
              axios.get("http://localhost:8082/class").then((res) => {
                this.data = res.data;
                console.log(this.data);
                this.tableData = this.data.slice(0, 5);
              });
            }
          });
      } else {
        ElNotification({
          title: "修改班号失败",
          message: "相关内容不能为空！",
          type: "error",
          duration: 2000,
        });
      }
    },
  },
};
</script>

<style scoped>
.wai {
  width: 60%;
  margin: 30px auto;
  border: 1px solid azure;
}
</style>